import { useState, useEffect, createContext } from 'react';
import { Modal, Tree, Input, Checkbox, message, Typography } from 'antd';
import { ApartmentOutlined } from '@ant-design/icons';

import Child1 from './child1';
import Child2 from './child2';
import styles from './style.less';

// 1. 创建上下文
const UserPreferencesContext = createContext({
  theme: '主题1',
  fontSize: '字体1',
});

const CreateContext = () => {
  const [preferences, setPreferences] = useState({
    theme: 'theme',
    fontSize: 'fontSize',
  });

  return (
    <>
      <div>CreateContext--使用demo:</div>
      1. 用createContext--创建上下文 2. 祖先组件中--使用 Provider进行包裹 3. 子组件中---使用
      useContext
      {/*  2. 使用 Provider--在祖先组件中进行包裹 */}
      <UserPreferencesContext.Provider value={{ preferences, setPreferences }}>
        <Child1 fatherContext={UserPreferencesContext} />
        <Child2 />
      </UserPreferencesContext.Provider>
    </>
  );
};

export default CreateContext;
